<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="1200"
    :cancel-btn="t('common.close')"
    :confirm-btn="null"
    @close="dialogHide"
  >
    <t-space direction="vertical">
      <t-button v-auth="['content:patch:listCreate']" @click="tableFn('add', null)">{{ t('common.add') }}</t-button>
      <t-table row-key="id" :data="list" :columns="columns" header-affixed-top bordered stripe lazy-load>
        <template #listorder="{ row }">
          <template v-if="$auth(['content:patch:listListorder'])">
            <t-input v-model="row.listorder" @blur="tableFn('listorder', row)"></t-input>
          </template>
          <template v-else>{{ row.listorder }}</template>
        </template>
        <template #action="{ row }">
          <t-space>
            <t-link v-auth="['content:patch:listUpdate']" theme="primary" @click="tableFn('edit', row)">{{
              t('common.edit')
            }}</t-link>
            <t-link v-auth="['content:patch:listDel']" theme="warning" @click="tableFn('delete', row)">{{
              t('common.delete')
            }}</t-link>
          </t-space>
        </template>
      </t-table>
    </t-space>
  </t-dialog>
</template>
<script setup lang="ts">
import { TableRowData } from 'tdesign-vue-next';
import { ref } from 'vue';

import { $auth } from '@/directives/auth';
import { t } from '@/locales';

import { COLUMNS_PATCH_LIST } from '../constants';

const list = ref([]);
const emits = defineEmits(['tableFn', 'confirm']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);

const columns = ref(...[COLUMNS_PATCH_LIST]);

const tableFn = (type: string, row?: TableRowData) => {
  emits('tableFn', type, row);
};

const dialogShow = (action: string, row?: any) => {
  visible.value = true;
  type.value = action;
  if (action === 'edit') {
    list.value = row.patchList;

    dialogTitle.value = `${t('common.edit')}【${row.title}】`;
  } else {
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  visible.value = false;
};

const update = (rows: any[]) => {
  list.value = rows;
};

defineExpose({
  dialogShow,
  dialogHide,
  update,
});
</script>
